<template>
  <div class="information">
    <Nav :activeNav="activeNav" :navList="navList" />
    <div class="in-wrapper">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="ruleForm"
        label-width="120px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="ruleForm.username"
            placeholder="请输入用户名"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="realName">
          <el-input
            v-model="ruleForm.realName"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="ruleForm.mobile"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input
            v-model="ruleForm.email"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >保存修改</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeNav: "xx",
      navList: [
        {
          label: "个人信息",
          type: "xx",
        },
      ],
      ruleForm: {
        id: "",
        username: "",
        realName: "",
        mobile: "",
        email: "",
        gender: 0,
      },
      rules: {
        realName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号",
            trigger: "blur",
          },
        ],
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          {
            pattern: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/g,
            message: "请输入正确的邮箱",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    update() {
      //
      this.$put(this.$Url.personal.editUserInfo, this.ruleForm).then((res) => {
        this.$message({
          message: "修改成功！",
          type: "success",
        });
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.update();
        } else {
          return false;
        }
      });
    },
  },
  created() {
    const userInfo = JSON.parse(localStorage.getItem("homeUserInfo"));
    this.ruleForm = userInfo;
  },
  components: {
    Nav: () => import("../components/nav.vue"),
  },
};
</script>
<style lang="scss" scoped>
.el-button--primary {
    color: #FFF;
    background-color: $mainColor;
    border-color: $mainColor;
}
.information {
  .in-wrapper {
    width: 600px;
    margin: 20px auto;
  }
}
</style>
